//
// Section Variables
//
$include-html-section-classes: $include-html-classes !default;

// We use these to set padding and hover factor
$section-title-padding: emCalc(15px) !default;
$section-content-padding: emCalc(15px) !default;
$section-function-factor: 10% !default;

// These style the titles
$section-title-color: #333 !default;
$section-title-bg: #efefef !default;
$section-title-bg-active: darken($section-title-bg, $section-function-factor) !default;
$section-title-bg-active-tabs: #fff !default;
$section-title-bg-hover: darken($section-title-bg, $section-function-factor/2) !default;

// Want to control border size, here ya go!
$section-border-size: 1px !default;
$section-border-style: solid !default;
$section-border-color: #ccc !default;

// Font controls
$section-font-size: emCalc(14px) !default;

// Control the color of the background and some size options
$section-content-bg: #fff !default;
$section-vertical-nav-min-width: emCalc(200px) !default;
$section-vertical-tabs-title-width: emCalc(200px) !default;
$section-bottom-margin: emCalc(20px) !default;

$title-selector: ".title" !default;
$content-selector: ".content" !default;


//
// Section Mixins
//

// We use this mixin to create the basic container styles for sections when they act like accordions
@mixin section-container($base-style:true, $section-type:accordion) {

  /// We can set this to false to not include these styles to avoid repeated CSS on classes.
  @if $base-style {
    width: 100%;
    display: block;
    margin-bottom: $section-bottom-margin;
  }

  // Accordion container border styles
  @if $section-type == accordion {
    border: $section-border-size $section-border-style $section-border-color;
    border-top: none;
  }

  // Tabs container border styles
  @else if $section-type == tabs {
    border: 0;
    position: relative;
  }

  // Vertical Tabs container border styles
  @else if $section-type == vertical-tabs {
    border: $section-border-size $section-border-style $section-border-color;
    position: relative;
  }

  // Vertical Nav container border styles
  @else if $section-type == vertical-nav {
    border: 0;
    position: relative;
  }

  // Horizontal Nav container border styles
  @else if $section-type == horizontal-nav {
    position: relative;
    background: $section-title-bg;
    border: $section-border-size $section-border-style $section-border-color;
  }

}


@mixin section($section-type:accordion, $title-selector:".title", $content-selector:".content", $title-padding:$section-title-padding, $title-color:$section-title-color, $title-font-size:$section-font-size, $title-bg:$section-title-bg, $title-bg-hover:$section-title-bg-hover, $title-bg-active:$section-title-bg-active, $title-color-active:$section-title-color, $content-bg:$section-content-bg, $content-padding:$section-content-padding, $section-border-size:$section-border-size, $section-border-style:$section-border-style, $section-border-color: $section-border-color) {

  // Default Styles
  > #{$title-selector} {
    background-color: $title-bg;
    cursor: $cursor-pointer-value;
    margin-bottom: 0;

    a {
      padding: $title-padding;
      display: inline-block;
      color: $title-color;
      font-size: $title-font-size;
      white-space: nowrap;
    }
    &:hover { background-color: $title-bg-hover; }
  }

  #{$content-selector} {
    display: none;
    padding: $content-padding;
    background-color: $content-bg;

    &>*:last-child { margin-bottom: 0; }
    &>*:first-child { padding-top: 0; }
    &>*:last-child:not(.flex-video) { padding-bottom: 0; }
  }

  &.active {
    & > #{$content-selector} { display: block; }
    & > #{$title-selector} { background: $title-bg-active;
      a { color: $title-color-active; }
    }
  }

  // Style for when Accordion
  @if $section-type == accordion {
    // border-top: $section-border-size $section-border-style $section-border-color;
    position: relative;

    > #{$title-selector} {
      top: 0;
      width: 100%;
      margin: 0;
      border-top: $section-border-style $section-border-size $section-border-color;

      a { width: 100%; }
    }
  }

  // Styles for when tabs
  @else if $section-type == tabs {
    border: 0;
    position: static;

    > #{$title-selector} {
      width: auto;
      border: $section-border-style $section-border-size $section-border-color;
      border-#{$opposite-direction}: 0;
      border-bottom: 0;
      position: absolute;
      top: 0;
      z-index: 1;

      a { width: 100%; }
    }
    &:last-child #{$title-selector} { border-#{$opposite-direction}: $section-border-style $section-border-size $section-border-color; }

    #{$content-selector} {
      border: $section-border-style $section-border-size $section-border-color;
      position: absolute;
      z-index: 10;
      display: none;
      top: -1px;
    }

    &.active {
      & > #{$title-selector} {
        z-index: 11;
        border-bottom: 0;
        background-color: $title-bg-active;
      }
      & > #{$content-selector} { position: relative; }
    }
  }

  // Styles for when Vertical Tabs
  @else if $section-type == vertical-tabs {
    padding-top: 0 !important;
    border: 0;
    position: static;

    > #{$title-selector} {
      position: absolute;
      border-top: $section-border-style $section-border-size $section-border-color;
      width: $section-vertical-tabs-title-width;
    }
    &:first-child #{$title-selector} { border-top: 0; }

    #{$content-selector} {
      // Display all content blocks to account for the scrollbar
      // in the outerWidth measurements. JavaScript will toggle the active tabs.
      display: block;
      position: relative;
      left: $section-vertical-tabs-title-width;
      border-left: $section-border-style $section-border-size $section-border-color;
      z-index: 10;
    }

    &.active {
      & > #{$title-selector} {
        background-color: $title-bg-active;
        width: $section-vertical-tabs-title-width + emCalc(1px); // Cover the content's left border
        border-right: solid 0 transparent;
        z-index: 11; // Put active title on top of the content
      }
      &:last-child #{$title-selector} { border-bottom: 0; }
    }
  }

  // Styles for when Vertical Nav
  @else if $section-type == vertical-nav {
    padding-top: 0 !important;
    position: relative;

    > #{$title-selector} {
      border-top: none;
      border: $section-border-style $section-border-size $section-border-color;

      a {
        display: block;
        width: 100%;
      }
    }
    #{$content-selector} { display: none; }
    &:first-child #{$title-selector} { border-bottom: none; }

    &.active {
      & > #{$content-selector} {
        display: block;
        position: absolute;
        #{$default-float}: 100%;
        top: 0px;
        z-index: 999;
        min-width: $section-vertical-nav-min-width;
        border: $section-border-style $section-border-size $section-border-color;
      }
    }
  }

  // Styles for when Horizontal Nav
  @else if $section-type == horizontal-nav {
    padding-top: 0;
    border: 0;
    position: static;

    > #{$title-selector} {
      width: auto;
      border: $section-border-style $section-border-size $section-border-color;
      border-#{$default-float}: 0;
      top: -1px;
      position: absolute;
      z-index: 1;

      a { width: 100%; }
    }

    #{$content-selector} { display: none; }

    &.active {
      & > #{$content-selector} {
        display: block;
        position: absolute;
        z-index: 999;
        #{$default-float}: 0;
        top: -2px;
        min-width: $section-vertical-nav-min-width;
        border: $section-border-style $section-border-size $section-border-color;
      }
    }
  }

}



@if $include-html-section-classes != false {

  /* Sections */
  .section-container, .section-container.auto {
    @include section-container(accordion);

    &>section,
    &>.section { @include section(accordion); }
  }

  .section-container.tabs {
    @include section-container(false, tabs);

    &>section,
    &>.section { @include section(tabs, $title-bg-active:$section-title-bg-active-tabs); }
  }

  @media #{$small} {

    .section-container.auto {
      @include section-container(false, tabs);

      &>section,
      &>.section { @include section(tabs, $title-bg-active:$section-title-bg-active-tabs); }
    }
    .section-container.accordion .section {
      padding-top: 0 !important;
    }

    .section-container.vertical-tabs {
      @include section-container(false, vertical-tabs);

      section,
      .section { @include section(vertical-tabs); }
    }

    .section-container.vertical-nav {
      @include section-container(false, vertical-nav);

      &>section,
      &>.section { @include section(vertical-nav); }
    }

    .section-container.horizontal-nav {
      @include section-container(false, horizontal-nav);

      &>section,
      &>.section { @include section(horizontal-nav); }
    }
  }

  // Change all variations to expanded accordions when no JS is detected.
  .no-js .section-container {
    &.auto,
    &.accordion,
    &.tabs,
    &.vertical-tabs,
    &.vertical-nav,
    &.horizontal-nav {
      @include section-container(accordion);

      &>section,
      &>.section { @include section(accordion);
        #{$title-selector} {
          position: static;
          width: 100%;
          border-left: 0;
          border-right: 0;
        }

        #{$content-selector} {
          position: static;
          display: block;
          width: 100%;
          border-left: 0;
          border-right: 0;
          border-bottom: 0;
        }
      }

    }
  }

}
